<template>
	<view>
		<van-notify id="van-notify" />
		<van-dialog id="van-dialog" />
		<van-toast id="van-toast" />
		<van-cell-group>
			<van-field label="申请人" data-type="name" input-align="right" right-icon readonly :value="userDetail.name"
			 right-icon-class="right-icon-blank" />
			<m-dept-field :show="userDetail.zDept" @change="onChange" />
			
			<van-field label="乘车人" :value="userDetail.name"  input-align="right" data-type="passengerName" @change="onChange" right-icon="edit"
			  />
			<van-field label="乘车人电话" :value="userDetail.tel"  type="digit" input-align="right" data-type="passengerTel" right-icon="edit" @change="onChange"
			  />
		</van-cell-group>

		<view style="margin: 20rpx 0;">
		</view>

		<van-tabs type="card" :color="primaryColor" @change="onTabChange" active="yuyue">
			<van-tab title="预约" name="yuyue">
				<view class="tab-contaner">
					<van-cell-group>
						<m-date-field label="发车时间" type="setoffTime" @change="onChange" :minDate="setoffMinDate"  />
						<m-date-field label="返回时间" type="backTime" @change="onChange"  :minDate="backTimeMinDate" placeholder="(选填)"/>
						<van-field label="乘坐人数" maxlength="3"  type="digit" input-align="right" data-type="passengersNum" right-icon="edit" @change="onChange"
						  />
						<van-field label="用车数量" maxlength="3" type="digit" input-align="right" data-type="requstCarNum" right-icon="edit"
						 @change="onChange"  />
						<m-map-field label="乘车地点" type="setoffAddress" autosize @change="onChange"/>
						<m-map-field label="到达地点" type="arrivalAddress"  @change="onChange"/>
						<van-field label="用车事由"  maxlength="100"  input-align="right" data-type="applyReason" @change="onChange"
						 right-icon="edit" placeholder="(可选)" />
						 <view style="padding: 10px 16px;background-color: white;">
							 <van-checkbox :value="allowCarpooling" :checked-color="primaryColor" data-type="allowCarpooling" @change="onChange">
							 							 <text class="accept-share">
							 								 接受拼车（如接收拼车，请确认乘车人数）
							 							 </text>
							 </van-checkbox>
						 </view>
					</van-cell-group>
				</view>
			</van-tab>
			<van-tab title="接机" name="jieji">
				<view class="tab-contaner">
					<van-cell-group>
						<m-date-field label="飞机到达时间" type="setoffTime" @change="onChange"  />
						<m-date-field label="返回时间" type="backTime" @change="onChange" placeholder="(选填)" />
						<van-field label="航班号"  input-align="right" data-type="airNumber" right-icon="edit" @change="onChange"
						  />
						<van-field label="乘坐人数" maxlength="3" type="digit" input-align="right" data-type="passengersNum" right-icon="edit" @change="onChange"
						  />
						 <van-field label="用车数量" maxlength="3" type="digit" input-align="right" data-type="requstCarNum" right-icon="edit"
						  @change="onChange"  />
						<!-- <van-field label="乘车人"  input-align="right" data-type="phone" @change="onChange" right-icon="edit"
						 placeholder="请输入用车人姓名" />
						<van-field label="乘车人电话"  type="number" input-align="right" data-type="phone" right-icon="edit" @change="onChange"
						 placeholder="请输入用车人手机号" /> -->
						 <m-map-field label="乘车地点" type="setoffAddress"  autosize  @change="onChange"/>
						<m-map-field label="到达地点" type="arrivalAddress"  @change="onChange"/>
						<van-field label="备注" maxlength="100"  input-align="right" data-type="note" @change="onChange"
						 right-icon="edit" placeholder="(可选)" />
					</van-cell-group>
				</view>
			</van-tab>
			<van-tab title="送机" name="songji">
				<view class="tab-contaner">
					<van-cell-group>
						<m-date-field label="发车时间" type="setoffTime" @change="onChange"  />
						<m-date-field label="返回时间" type="backTime" @change="onChange" placeholder="(选填)" />
						<van-field label="航班号"  input-align="right" data-type="airNumber" right-icon="edit" @change="onChange"
						  />
						<van-field label="乘坐人数"  maxlength="3" type="digit" input-align="right" data-type="passengersNum" right-icon="edit" @change="onChange"
						  />
						 <van-field label="用车数量" maxlength="3" type="digit" input-align="right" data-type="requstCarNum" right-icon="edit"
						  @change="onChange"  />
					<!-- 	<van-field label="乘车人"  input-align="right" data-type="phone" @change="onChange" right-icon="edit"
						 placeholder="请输入用车人姓名" />
						<van-field label="乘车人电话"  type="number" input-align="right" data-type="phone" right-icon="edit" @change="onChange"
						 placeholder="请输入用车人手机号" /> -->
						<m-map-field label="乘车地点" type="setoffAddress" autosize @change="onChange"/>
						<m-map-field label="到达地点" type="arrivalAddress"  @change="onChange"/>
						<van-field label="备注" maxlength="100"  input-align="right" data-type="note" @change="onChange"
						 right-icon="edit" placeholder="(可选)" />
					</van-cell-group>
				</view>
			</van-tab>
		</van-tabs>




		<view style="margin: 20px 0">
			<van-button :color="primaryColor" :square="true" size="large" @click="onApply">提交申请</van-button>
		</view>

		<van-action-sheet :show="deptListVisibility" @close="onCloseDeptList">
			<m-titlebar title="科室选择" @confirm="onSelectDept" @cancel="onCloseDeptList" :color="primaryColor">
				<van-picker ref="deptPicker" :columns="deptListData" @change="onChangeDept" />
			</m-titlebar>
		</van-action-sheet>
	</view>
</template>

<script>
	import Dialog from '@/wxcomponents/dialog/dialog'
	import utils from '@/common/utils.js'
	import Toast from '@/wxcomponents/toast/toast'
	import moment from 'moment'
	export default {
		data() {
			return {
				deptListVisibility: false,
				primaryColor: getApp().globalData.primaryColor,
				deptNameTemp:'',
				userDetail:{},
				allowCarpooling: false,
				setoffMinDate: moment(new Date().getTime()).add(1, 'hours').format('YYYY-MM-DD HH:mm:ss'),
				backTimeMinDate: moment(new Date().getTime()).add(1, 'hours').format('YYYY-MM-DD HH:mm:ss'),
				reqData:{
					orderType: 'yuyue',
					allowCarpooling: 'no',
					airNumber:'1',
					setoffAddress: '1',
					arrivalAddress: '1',
					applyPartmentId: '',
					applyReason:'0',
					passengers:[]
				}
			};
		},
		async onLoad() {
			try{
				const userDetailTemp = await this.getUserDetail()
				userDetailTemp.zDept = this.getDeptName(userDetailTemp.partment)
				this.userDetail = userDetailTemp
				this.reqData.applyPartmentId = userDetailTemp.partment.partmentId
				this.reqData.passengers.push({
					name: this.userDetail.name,
					tel: this.userDetail.tel
				})
			}catch(e){
				//TODO handle the exception
				console.log(e)
			}
		},
		methods: {
			onTabChange(event){
				this.reqData.orderType = event.detail.name
			},
			onChange(event) {
				const type = event.currentTarget.dataset.type
				console.log(event)
				//todo check
				if(type == 'passengerName'){
					let psg = this.reqData.passengers
					if(psg){
						psg[0].name = event.detail
					}else{
						psg = [{name: event.detail}]
					}
					this.reqData.passengers = psg
				}else if(type == 'passengerTel'){
					let psg = this.reqData.passengers
					if(psg){
						psg[0].tel = event.detail
					}else{
						psg = [{tel: event.detail}]
					}
				}else if(type == 'setoffAddress'){
					this.reqData.setoffAddress = event.detail.address
				}else if(type == 'arrivalAddress'){
					this.reqData.arrivalAddress = event.detail.address
				}else if(type == 'allowCarpooling'){
					this.allowCarpooling = event.detail
					this.reqData.allowCarpooling = this.allowCarpooling ? 'yes' : 'no'
				}else if(type == 'dept'){
					if(event.detail.dept2){
						this.reqData.applyPartmentId = event.detail.dept2.partmentId
					}else{
						this.reqData.applyPartmentId = event.detail.dept1.partmentId
					}
				}
				else{
					this.reqData[type] = event.detail
				}
				console.log(type)
				console.log(event.detail)
				
			},
			async getUserDetail(){
				return await utils.req('/user/getUserDetail', {token: uni.getStorageSync('userinfo').token})
			},
			getDeptName(obj){
				this.deptNameTemp = `${obj.name}-${this.deptNameTemp}`
				if(obj.up){
					return this.getDeptName(obj.up)
				}else{
					return this.deptNameTemp.substring(0, this.deptNameTemp.lastIndexOf('-'))
				}
			},
			onApply() {
				//check
				if(this.reqData.setoffTime && this.reqData.backTime){
					if(this.reqData.setoffTime > this.reqData.backTime){
						Toast("返回时间不能小于发车时间")
						return
					}
				}
				if(!this.reqData.setoffAddress || this.reqData.setoffAddress.length < 5){
					Toast("乘车地点长度必须大于5")
					return
				}
				if(!this.reqData.arrivalAddress || this.reqData.arrivalAddress.length < 5){
					Toast("到达地点长度必须大于5")
					return
				}
				Dialog.confirm({
					title: '确认提交',
					message: '请确认是否提交用车申请'
				}).then(async() => {
					try{
						uni.showLoading({
							mask:true,
							title:'上传数据中...'
						})
						this.reqData.token = uni.getStorageSync('userinfo').token
						await utils.req('/order/new', this.reqData)
						uni.navigateTo({
							url: '../bus-list/bus-list?role=user'
						})
					}catch(e){
						console.error(e)
						Toast(e.msg)
					}finally{
						uni.hideLoading()
					}
				}).catch(() => {
					// on cancel
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		--tabs-default-color: $uni-color-primary
	}

	.tab-contaner {
		padding: 20px 0;
	}
	.accept-share{
		font-size: 0.8em;
		color: $uni-text-color-grey;
	}
</style>
